<template>
  <div id="app">
    <br>
    <h2>EasyPlayerPro案例演示</h2>
    <br>
    <div class="player-container">
      <div class="player-item">
        <div class="player-box" id="player_box1"></div>
      </div>
    </div>
    <br>
    <div class="controls">
      <div class="checkbox-group">
        <label>
          <input @click="() => onUse('useWCS')" type="checkbox" :checked="config.useWCS" />
          Wasm解码
        </label>
        <label>
          <input @click="() => onUse('hasAudio')" type="checkbox" :checked="config.hasAudio" />
          音频
        </label>
      </div>
      <div class="input-group">
        <label for="video-url">播放地址：</label>
        <input id="video-url" class="inputs" v-model="videoUrl" />
      </div>
      <div class="button-group">
        <button @click="onReplay()" v-if="isPlay">重播</button>
        <button @click="onPlayer()" v-if="!isPlay">播放</button>
        <button @click="onPlayerPlayback()" v-if="!isPlay">回放</button>
        <button @click="onPause()">暂停</button>
        <button @click="onMute()">静音</button>
        <button @click="setFullscreen()">全屏</button>
        <button @click="onStop()" v-if="isPlay">注销</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const videoUrl = ref<string>('ws://localhost:6230/ws_flv/live/stream_1_0.flv');
const config = ref({
  useSIMD: false,
  hasAudio: true,
  showBandwidth: false,
  demuxUseWorker: true,
  useMSE: true,
  useWCS: true,
});

const isPlay = ref(false);
const playerInfo = ref<any>(null); // 根据实际类型替换 `any`

const onDestroy = async () => {
  return new Promise<void>((resolve) => {
    if (playerInfo.value) {
      playerInfo.value.destroy();
      playerInfo.value = null;
    }
    setTimeout(() => {
      resolve();
    }, 100);
  });
};

const playCreate = () => {
  const container = document.getElementById('player_box1');
  if (!container) return;

  const easyplayer = new EasyPlayerPro({
    container: container,
    decoder: './js/decoder-pro.js',
    videoBuffer: 0.2, // 缓存时长
    isResize: false,
    text: "",
    loadingText: "加载中",
    // debug: true,
    // debugLevel: 'debug',
    useMSE: config.value.useMSE,
    useSIMD: config.value.useSIMD,
    useWCS: config.value.useWCS,
    isMulti: true,
    hasAudio: config.value.hasAudio,
    showBandwidth: config.value.showBandwidth, // 显示网速
    showPerformance: config.value.showBandwidth,
    operateBtns: {
      fullscreen: true,
      screenshot: true,
      play: true,
      audio: true,
      record: true,
      quality: true,
      performance: true,
    },
    watermarkConfig: {
      text: {
        content: 'easyplayer-pro'
      },
      right: 10,
      top: 10
    },
    playbackForwardMaxRateDecodeIFrame: 1,
    isWebrtcForOthers: true,
    demuxUseWorker: config.value.demuxUseWorker,
    supportHls265: true,
  });

  easyplayer.on("fullscreen", function (flag: any) {
    console.log('is fullscreen', flag);
  });
  easyplayer.on('playbackPreRateChange', (rate: any) => {
    easyplayer.forward(rate);
  });
  easyplayer.on('playbackSeek', (data: any) => {
    easyplayer.setPlaybackStartTime(data.ts);
  });

  playerInfo.value = easyplayer;
};

const onPlayer = async () => {
  isPlay.value = true;
  setTimeout((url: string) => {
    if (playerInfo.value) {
      playerInfo.value.play(url)
        .then(() => {
          // 成功播放的逻辑
        })
        .catch((e: any) => {
          console.error(e);
        });
    }
  }, 0, videoUrl.value);
};

const onPlayerPlayback = async () => {
  setTimeout((url: string) => {
    if (playerInfo.value) {
      playerInfo.value.playback(url, {
        controlType: "simple",
        showRateBtn: true,
        showControl: true,
        isUseLocalCalculateTime: true, // 是否使用本地时间来计算playback时间
        playbackPause: false,
        useMSE: true,
        rateConfig: [
          { label: "正常", value: 1 },
          { label: "2倍", value: 2 },
          { label: "4倍", value: 4 },
          { label: "8倍", value: 8 },
          { label: "16倍", value: 16 },
        ],
      }).then(() => {
        // 成功播放的逻辑
      }).catch((e: any) => {
        console.error(e);
      });
    }
  }, 0, videoUrl.value);
};

const onStop = async () => {
  isPlay.value = false;
  await onDestroy();
  playCreate();
};

const onUse = async (type: string) => {
  if (type === 'demux') {
    config.value.demuxUseWorker = !config.value.demuxUseWorker;
  } else if (type === 'band') {
    config.value.showBandwidth = !config.value.showBandwidth;
  } else if (type === 'hasAudio') {
    config.value.hasAudio = !config.value.hasAudio;
  } else {
    config.value.useMSE = false;
    config.value.useSIMD = false;
    config.value.useWCS = false;
    if (type === 'useMSE') config.value.useMSE = true;
    if (type === 'useSIMD') config.value.useSIMD = true;
    if (type === 'useWCS') config.value.useWCS = true;
  }
  if (isPlay.value) {
    await onDestroy();
    playCreate();
    onPlayer();
  }
};

const setFullscreen = () => {
  if (playerInfo.value) {
    playerInfo.value.setFullscreen(true);
  }
};

const onPause = () => {
  if (playerInfo.value) {
    playerInfo.value.pause();
  }
};

const onMute = () => {
  if (playerInfo.value) {
    playerInfo.value.mute();
  }
};

const onReplay = async () => {
  await onDestroy();
  playCreate();
  onPlayer();
};

// 挂载时调用
onMounted(() => {
  playCreate();
});
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
}

h2 {
  text-align: center;
}

.player-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-box {
  width: 640px;
  height: 360px;
  background-color: #000;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.checkbox-group {
  display: flex;
  gap: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inputs {
  width: 300px;
  padding: 5px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-group button {
  padding: 10px 20px;
  border: 1px solid #000;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.button-group button:hover {
  background-color: #f0f0f0;
}
</style>
